<template>
	<view v-if="detail" class="bg-white px-2 py-5 position-relative">
		<view class="font-weight text-danger font-md">{{detail.cgMaterial.name}}</view>
		<view class="fn-26 cgMaterial pb-2">
			<view v-if="detail.cgMaterial"><text>材质：</text><text>{{detail.cgMaterial.texture}}</text></view>
			<view v-if="detail.cgMaterial"><text>规格型号：</text><text>{{detail.cgMaterial.type}}</text></view>
			<view v-if="detail.batch"><text>批号：</text><text>{{detail.batch}}</text></view>
			<view v-if="detail.code"><text>编码：</text><text>{{detail.code}}</text></view>
			<view class="text-orange"  v-if="detail.remain"><text>库存：</text><text>{{detail.remain}}</text></view>
			<view>发货数量：{{detail.nums}}</view>
			<view class="tag position-absolute bg-info text-white py-1 px-2" v-if="detail.shCustomerInfo">{{detail.shCustomerInfo.name}}</view>
		</view>
		
		 <!-- 签收详情 -->
		<view class="border-dashed-top py-2" v-if="detail.isSign===1">
			<view><text>签收数量：</text><text>{{detail.autNums}}</text></view>
			<view><text>签收人：</text><text >{{detail.signerName}}</text></view>
			<view><text>签收时间：</text><text>{{detail.signTime}}</text></view>
		</view>
		<!-- 创建详情 -->
		<view class="border-dashed-top font-sm text-light-muted py-2">
			
			<view>创建者：{{detail.creatorName}}</view>
			<view>创建时间：{{detail.createTime}}</view>
		</view>
		<view class="pt-2 d-flex j-end border-dashed-top">
			<view class="border main-rounded-circle border-orange text-orange px-2" @click="optionHandle()" v-if="jzUser&&!detail.isSign">签收</view>
		</view>
		
		<!-- 填写签收数量 -->
		<uni-popup ref="showtip" type="center" :mask-click="false">
			<view class="uni-tip bg-white pt-2">
				<view class="text-center px-2 font-weight font-md">签收数量</view>
				<view class="p-2">
					<input class="border p-2 w-100 d-block line-h border-box input-defind rounded font-sm"
					 :class="focusClass.autNums ? 'input-border-color' : ''"
					placeholder-class="text-light-muted" type="number"
					@focus="focus('autNums')" @blur="blur('autNums')"
					placeholder="请输入实际签收数量"
					v-model="model.autNums"/>
					<view class="text-danger" v-if="error.autNums">{{error.autNums}}</view>
				</view>

				<view class="d-flex j-sb">
					<view class="flex-1 py-2 text-center text-light-muted" @click="cancel('cancel')">取消</view>
					<view class="flex-1 py-2 text-center bg-danger text-white" @click="cancel('confirm')">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import api from '@/common/api/api.js'
	export default {
		components:{
			uniPopup
		},
		data() {
			return {
				id:-1,
				jzUser:false,
				detail:null,
				model:{
					autNums:''
				},
				error:{
					autNums:''
				},
				focusClass:{
					autNums:false
				}
			}
		},
		onLoad(e){
			this.id = e.id;
			this.getDetail()
			this.jzUser = uni.getStorageSync('role').findIndex((item,index)=>item.name==='jz_user')!==-1
		},
		methods: {
			focus(key){
				this.focusClass[key] = true
			},
			blur(key){
				this.focusClass[key] = false
			},
			 getDetail(){
				 let self = this;
				 self.$H.get(api.materialDetail+this.id).then(res=>{
					 self.detail = res.content;
				 })
			  },
			optionHandle(){
				this.$refs.showtip.open()
			},
			cancel(type){
				let self = this;
				if(type==='confirm'){
					if(self.model.autNums===''){
						self.error.autNums="请输入实际签收数量"
						return
					}
					if(self.model.autNums <= 0){
						self.error.autNums="签收数量不能小于或等于0"
						return
					}
					let postData = {
					      id:self.id,
					      autNums: self.model.autNums,
					      isSign: 1
					    }
					this.$refs.showtip.close()
					uni.showLoading({
						title:'数据提交中'
					})
					self.$H.post(api.updateMaterial,postData).then(res=>{
						uni.showToast({
							title:'签收成功',
							icon:'success'
						})
						self.getDetail();
						uni.navigateBack()
					})
				}else{
					this.$refs.showtip.close()
				}
				
				
			}
		}
	}
</script>

<style scoped>
	.tag{
		right:0upx;
		top:0;
		border-bottom-left-radius:26upx;
	}
/* 提示窗口 */
.uni-tip{
	width: 300px;
	border-radius: 10px;
}
</style>
